<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="app-nav-bar">
        <!-- 插槽 slot -->
      <van-button 
      slot="title"
      class="search-btn"
      icon="search"
      type="info"
      round
      size="small">
      搜索
      </van-button>
    </van-nav-bar>
    <!-- /导航栏 -->
    <!-- 文章频道列表 -->
    <!-- 
      标签页组件有一个功能, 只有你在第一次查看标签页的时候才会渲染里面的内容
     -->
    <van-tabs v-model="active">
      <van-tab 
      :title="channel.name"
      :key="channel.id"
      v-for="channel in channels">
      <!-- 文章列表 -->
      <!-- 3.文章列表子组件 -->
      <!-- 4.父组件给子组件传值 -->
      <ArticleList :channel="channel"/>
      <!-- /文章列表 -->
      </van-tab>
    </van-tabs>
    <!-- /文章频道列表 -->
  </div>
</template>

<script>
  import { getUserChannels } from "@/api/user"
  // 1.引入子组件
  import ArticleList from "./components/article-list"
  export  default  {
    name: 'HomeIndex',
    // 2.注册子组件
    components: {
      ArticleList
    },
    data() {
      return {
        active: 0, // 控制被激活的标签项
        channels: [] // 频道列表
      };
    },
    mounted() {
      this.loadChannels()
    },
    methods: {
      async loadChannels () {
        const { data } = await getUserChannels()
        this.channels = data.data.channels
        console.log(data);
      }
    }
  }
</script>
<style>
  .home-container .van-nav-bar__title {
    max-width: unset;
  }
  .home-container .search-btn {
    width: 277px;
    height: 30px;
    background: #5babfb;
    border: none;
  }
  .search-btn .van-button__content {
    font-size: 14px;
  }
  .search-btn .van-button__icon {
    font-size: 16px;
  }
</style>